<template>

  <div class="main">
    <mavon-editor style="height: 580px; width: 1200px; z-index:1;border: 1px solid #d9d9d9; " v-model="skill.content"/>
    <div>
      <a-button style="float: right; margin-right: 16px; margin-top: 10px; " type="primary" @click="showDrawer">发布技能</a-button>
      <a-drawer
        title="发布技能信息"
        :width="720"
        :visible="visible"
        :body-style="{ paddingBottom: '80px' }"
        @close="onClose"
      >
        <a-form :form="form" layout="vertical" hide-required-mark>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="技能名称">
                <a-input
                  v-model="skill.name"
                  style="width: 200px;"

                  placeholder="Please enter user name"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="技能标签1">
                <a-input v-model="skill.tagOne">

                </a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="技能标签2">
                <a-input v-model="skill.tagTwo"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="技能标签3">
                <a-input v-model="skill.tagThree"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="技能标签4">
                <a-input v-model="skill.tagFour"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="技能标签5">
                <a-input v-model="skill.tagFive"></a-input>
              </a-form-item>
            </a-col>
<!--            <a-col :span="12">-->
<!--              <a-form-item>-->
<!--                <a-upload-->
<!--                  name="file"-->
<!--                  :multiple="true"-->
<!--                  action="https://www.mocky.io/v2/5cc8019d300000980a055e76"-->
<!--                  @change="handleChange"-->
<!--                >-->
<!--                  <a-button style="margin-top: 28px; "> <a-icon type="upload" /> 上传封面图片 </a-button>-->
<!--                </a-upload>-->
<!--              </a-form-item>-->
<!--            </a-col>-->
          </a-row>
<!--          <a-row :gutter="16">-->
<!--            <a-col :span="24">-->
<!--              <a-form-item label="Description">-->
<!--                <a-textarea-->
<!--                  v-model="skill.description"-->
<!--                  v-decorator="[-->
<!--                  'description',-->
<!--                  {-->
<!--                    rules: [{ required: true, message: 'Please enter url description' }],-->
<!--                  },-->
<!--                ]"-->
<!--                  :rows="4"-->
<!--                  placeholder="please enter url description"-->
<!--                />-->
<!--              </a-form-item>-->
<!--            </a-col>-->
<!--          </a-row>-->
        </a-form>
        <div
          :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
        >
          <a-button :style="{ marginRight: '8px' }" @click="onClose">
            Cancel
          </a-button>
          <a-button type="primary" @click="saveOrUpdate">
            Submit
          </a-button>
        </div>
      </a-drawer>
    </div>
  </div>



</template>
<script>
import skill from "@/api/skill";
export default {
  data() {
    return {
      form: this.$form.createForm(this),
      visible: false,
      skill: {
        id: null,
      },
      skillId: 0,
    };
  },
  created() {
    if (this.$route.params && this.$route.params.id) {
      this.skillId = this.$route.params.id;
      this.getSkillEditInfo();
    }
  },
  methods: {
    getSkillEditInfo() {
      skill.getSkillInfoById(this.skillId).then(responses => {
        let data = this.skill = responses.data.skillInfo;
        console.log(data);
      })
    },
    saveOrUpdate() {
      skill.saveOrUpdateSkill(this.skill).then(response => {
        if (!this.skill.id) {
          this.$message.success(
            '发布成功',
            3,
          );
        } else {
          this.$message.success(
            'modified',
            3,
          );
        }

        // this.$router.push({ path: '/skill/list' });
      })
    },

    // handleChange(info) {
    //   if (info.file.status !== 'uploading') {
    //     console.log(info.file, info.fileList);
    //   }
    //   if (info.file.status === 'done') {
    //     this.$message.success(`${info.file.name} file uploaded successfully`);
    //   } else if (info.file.status === 'error') {
    //     this.$message.error(`${info.file.name} file upload failed.`);
    //   }
    // },
    showDrawer() {
      this.visible = true;
    },
    onClose() {
      this.visible = false;
    },
  },
};
</script>


<style scoped>

</style>